<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Welcome to the Antora Demo! :: Antora Docs</title>
    <meta name="generator" content="Antora 3.1.7">
    <link rel="stylesheet" href="../../_/css/site.css">
  </head>
  <body class="article">
<header class="header">
  <nav class="navbar">
    <div class="navbar-brand">
      <a class="navbar-item" href="../..">Antora Docs</a>
      <button class="navbar-burger" aria-controls="topbar-nav" aria-expanded="false" aria-label="Toggle main menu">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
    <div id="topbar-nav" class="navbar-menu">
      <div class="navbar-end">
        <a class="navbar-item" href="#">Home</a>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="#">Products</a>
          <div class="navbar-dropdown">
            <a class="navbar-item" href="#">Product A</a>
            <a class="navbar-item" href="#">Product B</a>
            <a class="navbar-item" href="#">Product C</a>
          </div>
        </div>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="#">Services</a>
          <div class="navbar-dropdown">
            <a class="navbar-item" href="#">Service A</a>
            <a class="navbar-item" href="#">Service B</a>
            <a class="navbar-item" href="#">Service C</a>
          </div>
        </div>
        <div class="navbar-item">
          <span class="control">
            <a class="button is-primary" href="#">Download</a>
          </span>
        </div>
      </div>
    </div>
  </nav>
</header>
<div class="body">
<div class="nav-container" data-component="component-b" data-version="2.0">
  <aside class="nav">
    <div class="panels">
<div class="nav-panel-menu is-active" data-panel="menu">
  <nav class="nav-menu">
    <button class="nav-menu-toggle" aria-label="Toggle expand/collapse all" style="display: none"></button>
    <h3 class="title"><a href="index.html">Component B</a></h3>
<ul class="nav-list">
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item is-current-page" data-depth="1">
    <a class="nav-link" href="index.html">Welcome</a>
  </li>
</ul>
  </li>
  <li class="nav-item" data-depth="0">
<ul class="nav-list">
  <li class="nav-item" data-depth="1">
    <a class="nav-link" href="module-one/overview.html">Module One</a>
  </li>
</ul>
  </li>
</ul>
  </nav>
</div>
<div class="nav-panel-explore" data-panel="explore">
  <div class="context">
    <span class="title">Component B</span>
    <span class="version">2.0</span>
  </div>
  <ul class="components">
    <li class="component">
      <div class="title"><a href="../../component-a/1.5.6/inline-text-formatting.html">Component A</a></div>
      <ul class="versions">
        <li class="version is-latest">
          <a href="../../component-a/1.5.6/inline-text-formatting.html">1.5.6</a>
        </li>
      </ul>
    </li>
    <li class="component is-current">
      <div class="title"><a href="index.html">Component B</a></div>
      <ul class="versions">
        <li class="version is-current is-latest">
          <a href="index.html">2.0</a>
        </li>
        <li class="version">
          <a href="../1.0/index.html">1.0</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
    </div>
  </aside>
</div>
<main class="article">
<div class="toolbar" role="navigation">
<button class="nav-toggle"></button>
  <a href="index.html" class="home-link is-current"></a>
<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ul>
    <li><a href="index.html">Component B</a></li>
    <li><a href="index.html">Welcome</a></li>
  </ul>
</nav>
<div class="page-versions">
  <button class="version-menu-toggle" title="Show other versions of page">2.0</button>
  <div class="version-menu">
    <a class="version is-current" href="index.html">2.0</a>
    <a class="version" href="../1.0/index.html">1.0</a>
  </div>
</div>
<div class="edit-this-page"><a href="https://gitlab.com/antora/demo/demo-component-b/edit/v2.0/docs/modules/ROOT/pages/index.adoc">Edit this Page</a></div>
</div>
  <div class="content">
<aside class="toc sidebar" data-title="Contents" data-levels="2">
  <div class="toc-menu"></div>
</aside>
<article class="doc">
<h1 class="page">Welcome to the Antora Demo!</h1>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>This is the home page of the Antora Demo site.
It is also the automatic start page for version <strong>2.0</strong> of Component B.</p>
</div>
<div class="paragraph">
<p>Component B is one of two documentation components in the Antora Demo.
The other docs component, Component A, can be accessed via the component selector menu (aka component drawer) at the bottom of the menu on the left side of the page.</p>
</div>
<div class="paragraph">
<p>To switch to version 1.0 of this page, use the page version selector.
The selector is on the task bar, located near the upper right corner of the page.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_page_source"><a class="anchor" href="#_page_source"></a>Page source</h2>
<div class="sectionbody">
<div class="paragraph">
<p>This page is sourced from the AsciiDoc file named <em class="path">index.adoc</em> that is located at <em class="path">demo-component-b/docs/modules/ROOT/pages</em>.</p>
</div>
<div class="sect2">
<h3 id="_why_is_this_the_home_page_of_component_b"><a class="anchor" href="#_why_is_this_the_home_page_of_component_b"></a>Why is this the home page of Component B?</h3>
<div class="paragraph">
<p>This page is automatically used as the start page of Component B because it is stored in the ROOT module and named <em class="path">index.adoc</em>.</p>
</div>
</div>
<div class="sect2">
<h3 id="_why_is_this_the_home_page_of_the_antora_demo_site"><a class="anchor" href="#_why_is_this_the_home_page_of_the_antora_demo_site"></a>Why is this the home page of the Antora Demo site?</h3>
<div class="paragraph">
<p>This page is used as the home page for the Antora Demo because it is assigned as the site <code>start_page</code> in the Demo site&#8217;s playbook file <em class="path">site.yml</em>.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_cross_reference_syntax_to_target_this_page"><a class="anchor" href="#_cross_reference_syntax_to_target_this_page"></a>Cross reference syntax to target this page</h2>
<div class="sectionbody">
<div class="paragraph">
<p>To create a cross reference <strong>to this page from another page in the ROOT module of Component B</strong>, the xref syntax would be <code>xref:index.adoc[]</code>.</p>
</div>
<div class="paragraph">
<p>To create a cross reference <strong>to this page from a page in Module One of Component B</strong>, the xref syntax would be <code>xref:ROOT:index.adoc[]</code>.</p>
</div>
<div class="sect2">
<h3 id="_always_target_the_latest_version_of_this_page"><a class="anchor" href="#_always_target_the_latest_version_of_this_page"></a>Always target the latest version of this page</h3>
<div class="paragraph">
<p>To create a cross reference <strong>to the latest version of this page from a page in Component A</strong>, the xref syntax would be <code>xref:component-b::index.adoc[]</code>.</p>
</div>
</div>
<div class="sect2">
<h3 id="_target_a_specific_version_of_this_page"><a class="anchor" href="#_target_a_specific_version_of_this_page"></a>Target a specific version of this page</h3>
<div class="paragraph">
<p>To create a cross reference <strong>to version 1.0 of this page from a page in Component A</strong>, the xref syntax would be <code>xref:1.0@component-b::index.adoc[]</code>.</p>
</div>
</div>
</div>
</div>
</article>
  </div>
</main>
</div>
<footer class="footer">
  <p>This page was built using the Antora default UI.</p>
  <p>The source code for this UI is licensed under the terms of the MPL-2.0 license.</p>
</footer>
<script id="site-script" src="../../_/js/site.js" data-ui-root-path="../../_"></script>
<script async src="../../_/js/vendor/highlight.js"></script>
  </body>
</html>
